<template>
  <div class="container">
    <div class="c-all flex-column">
      <div class="c1 flex-row">
        <div class="c1-left flex-column">
          <div class="c1-status flex-row">
            <span class="title">{{ getStatusText(goods.state) }}</span>
            <span class="time" v-if="goods.state == 1">
              <el-statistic
                class="flex-row countdown"
                ref="statistic"
                @finish="hilarity"
                format="HH:mm:ss"
                :value="goods.expire_time"
                time-indices
              >
                <span slot="title" class="time-head">{{ t("剩余") }}</span>
              </el-statistic>
            </span>
          </div>
          <div class="c1-order-num">{{ t("订单号") }}:{{ goods.order_no }}</div>
          <div class="c1-actions flex-row">
            <el-button
              class="c1-btn-1"
              v-if="goods.state == 1"
              @click="actions_click('order_pay')"
            >
              {{ t("付款") }}
            </el-button>
            <el-button
              class="c1-btn-2"
              v-if="goods.state < 4"
              @click="btn_action('order_edit')"
            >
              {{ t("修改订单") }}
            </el-button>
            <el-button
              class="c1-btn-3"
              v-if="goods.state == 1"
              type="text"
              @click="btn_action('order_cancel')"
            >
              {{ t("取消订单") }}
            </el-button>
          </div>
        </div>
        <div class="c1-right flex-column">
          <div class="c1-right-title">
            {{ t("订单详情提示") }}
          </div>
          <el-steps
            class="step"
            :active="
              order_track.length >= 4 || order_track.length >= 3
                ? order_track.length + 1
                : order_track.length
            "
            align-center
          >
            <!-- <el-step
              :title="t('提交订单')"
              :description="
                order_track.length > 0 ? order_track[0].createtime_text : ''
              "
            >
              <span slot="icon" class="step-icon">1</span>
            </el-step> -->
            <el-step
              :title="t('提交订单')"
              :description="
                order_track.length >= 1 ? order_track[0].createtime_text : ''
              "
            >
              <span slot="icon" class="step-icon">1</span>
            </el-step>
            <el-step
              :title="t('付款成功')"
              :description="
                order_track.length >= 2 ? order_track[1].createtime_text : ''
              "
            >
              <span slot="icon" class="step-icon">2</span>
            </el-step>
            <el-step
              :title="t('商品发货')"
              :description="
                order_track.length >= 3 ? order_track[2].createtime_text : ''
              "
            >
              <span slot="icon" class="step-icon">3</span>
            </el-step>
            <!-- :description="
                order_track.length >= 4 ? order_track[3].createtime_text : ''
              " -->
            <el-step :title="t('等待收货')">
              <span slot="icon" class="step-icon">4</span>
            </el-step>
            <el-step
              :title="t('完成')"
              :description="
                order_track.length >= 4 ? order_track[3].createtime_text : ''
              "
            >
              <span slot="icon" class="step-icon">5</span>
            </el-step>
          </el-steps>
        </div>
      </div>
      <div class="c2 flex-row" v-if="goods.express">
        <!-- info: https://www.cnblogs.com/BillyYoung/p/14690912.html -->
        <el-timeline class="timeline">
          <el-timeline-item
            v-for="(item, index) in goods.express.data"
            :key="index"
            type="primary"
            color="#FF5757"
            placement="top"
            :timestamp="item.status"
          >
            <div class="year">{{ item.ftime }}</div>
            {{ item.context }}
          </el-timeline-item>
        </el-timeline>
      </div>
      <div class="c3 flex-row">
        <div class="card flex-column">
          <span class="title">{{ t("收货人信息") }}</span>
          <el-form
            label-position="left"
            label-width="80px"
            :model="goods.address"
          >
            <el-form-item
              class="form-item"
              label-width="80px"
              :label="`${t('姓名')}:`"
            >
              <span>{{ goods.address.name }}</span>
            </el-form-item>
            <el-form-item
              class="form-item"
              label-width="80px"
              :label="`${t('国家')}:`"
            >
              <span>{{ goods.address.country }}</span>
            </el-form-item>
            <el-form-item
              class="form-item"
              label-width="80px"
              :label="`${t('地址')}:`"
            >
              <span>{{
                goods.address.province +
                goods.address.city +
                goods.address.district
              }}</span>
            </el-form-item>
            <el-form-item
              class="form-item"
              :label-width="$store.state.language == 'en' ? '160px' : '80px'"
              :label="`${t('详细地址')}:`"
            >
              <span>{{ goods.address.address }}</span>
            </el-form-item>
            <el-form-item
              class="form-item"
              :label-width="$store.state.language == 'en' ? '160px' : '80px'"
              :label="`${t('联系方式')}:`"
            >
              <span>{{ goods.address.mobile }}</span>
            </el-form-item>
          </el-form>
        </div>
        <div class="card flex-column">
          <span class="title">{{ t("配送方式") }}</span>
          <span class="desc">{{ goods.express_name }}</span>
          <span class="desc">{{ goods.express_no }}</span>
        </div>
        <div class="card flex-column">
          <span class="title">{{ t("付款信息") }}</span>
          <el-form
            label-position="left"
            :label-width="$store.state.language == 'en' ? '160px' : '80px'"
            :model="recive_info"
          >
            <el-form-item
              class="form-item"
              :label-width="$store.state.language == 'en' ? '160px' : '80px'"
              :label="`${t('付款方式')}:`"
            >
              <span>{{ pay_type }}</span>
            </el-form-item>
            <el-form-item
              class="form-item"
              :label-width="$store.state.language == 'en' ? '160px' : '80px'"
              :label="`${t('付款时间')}:`"
            >
              <span>{{ $util.timeChange(goods.pay.createtime) }}</span>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="c4">
        <el-table
          :data="goods.goods"
          style="width: 100%"
          :header-cell-style="{
            background: '#F1F1F1',
            fontWeight: '500',
            fontSize: '16px',
            color: '#000000',
          }"
        >
          <el-table-column :label="t('商品')" width="450">
            <template slot-scope="scope">
              <div class="goods">
                <img class="cover" :src="scope.row.image | imgSrc" />
                <span class="info">
                  <span class="name">{{ scope.row.title }}</span>
                  <span class="desc">{{
                    $t("购物车.颜色") + ":" + scope.row.difference
                  }}</span>
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="price" :label="t('单价')"></el-table-column>
          <el-table-column prop="number" :label="t('数量')"> </el-table-column>
          <el-table-column
            prop="actual_payment"
            :label="t('小计')"
          ></el-table-column>
          <el-table-column prop="address" :label="t('操作')" :align="'center'">
            <!-- eslint-disable-next-line -->
            <template slot-scope="scope">
              <div class="actions">
                <!-- <el-button type="text" size="small">{{ t("修改订单") }}</el-button> -->
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="bottom">
      <div class="bp">
        <div class="b1">{{ t("商品金额小计") }}:￥{{ goods.pay.price }}</div>
        <div class="b2">{{ t("实付款") }}:￥{{ goods.pay.actual_payment }}</div>
      </div>
      <el-button
        class="b-btn bg-red"
        v-if="goods.state == 1"
        size="small"
        @click="actions_click('order_pay')"
        >{{ t("去付款") }}</el-button
      >
      <el-button
        class="b-btn bg-000"
        v-if="goods.state == 2"
        size="small"
        @click="actions_click('order_edit')"
        >{{ t("修改订单") }}</el-button
      >
    </div>
    <div class="bottom-p"></div>
    <el-dialog
      :visible.sync="dialogVisible.show"
      :before-close="handleClose"
      :title="dialogVisible.title"
      :width="`${dialogVisible.width}px`"
    >
      <template v-if="dialogVisible.action == 'order_edit'">
        <orderEdit
          :address="goods.address"
          @editOrder="dialogHandle($event, 'order_edit')"
        ></orderEdit>
      </template>
      <template v-if="dialogVisible.action == 'order_cancel'">
        <orderCancel
          :order="goods"
          @cancelReason="dialogHandle($event, 'order_cancel')"
        ></orderCancel>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import orderEdit from "@/components/orderDialog/orderEdit.vue";
import orderCancel from "@/components/orderDialog/orderCancel.vue";
import { getOrderStatus } from "@/utils/util";
import {
  getOrderDetail,
  cancelOrder,
  updateOrderAddress,
  orderPayment,
} from "@/utils/api.js";
export default {
  components: {
    orderEdit,
    orderCancel,
  },
  computed: {
    pay_type() {
      if (!this.goods.pay.pay_type) return "-";
      if (this.goods.pay.pay_type == 0) return this.t("银行卡");
      if (this.goods.pay.pay_type == 1) return this.t("支付宝");
      if (this.goods.pay.pay_type == 2) return this.t("微信");
    },
  },
  data() {
    return {
      deadline: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
      order_track: [],
      recive_info: {},
      goods: {
        pay: {},
        address: {},
      },
      dialogVisible: {
        show: false,
        action: "",
        title: "",
      },
    };
  },
  mounted() {
    getOrderDetail({ order_id: this.$route.query.id }).then((res) => {
      if (res.code == 1) {
        this.goods = res.data;
        this.order_track = res.data.track;
        console.log("商品的步骤---", this.order_track);
      }
    });
  },
  methods: {
    /**
     * 简化翻译方法(少写property)
     * @param {String} v 最后一个key值
     */
    t(v) {
      return this.$t(`我的订单.${v}`);
    },
    /**
     * @param {String} action 订单修改:order_edit 取消订单:order_cancel
     */
    btn_action(action) {
      if (action == "order_edit") {
        this.dialogVisible = {
          show: true,
          action: action,
          title: this.t("订单修改"),
          width: 666,
        };
      } else if (action == "order_cancel") {
        //取消订单
        this.dialogVisible = {
          show: true,
          action: action,
          title: this.t("选择取消原因"),
          width: 500,
        };
      }
    },
    /**
     * @param {String} type 同btn_action的action
     */
    dialogHandle(e, action) {
      console.log(e, action);
      this.dialogVisible = { show: false };
      if (e.cancel == true) return;
      if (action == "order_cancel") {
        cancelOrder({
          order_id: e.order.id,
          cancel_cause: e.reason.cancel_cause,
        }).then((res) => {
          if (res.code == 1) {
            this.$message.success(res.msg);
            this.$router.go(-1);
          }
        });
      } else if (action == "order_edit") {
        updateOrderAddress({
          id: e.id,
          name: e.name,
          mobile: e.mobile,
          address: e.address,
          country: e.country,
          province: e.province,
          city: e.city,
          district: e.district,
        }).then((res) => {
          if (res.code == 1) {
            this.$message.success(res.msg);
            this.goods.address = e;
          }
        });
      }
    },
    handleClose() {
      this.dialogVisible = { show: false, action: "", title: "" };
    },
    hilarity() {},
    /**
     * 返回交易状态文字
     * @param {String|Number} state 订单状态:1=待支付,2=待发货,3=待收货,4=待评论,5=售后订单,6=已完成,7=已取消
     */
    getStatusText(state) {
      return this.t(getOrderStatus(state));
    },
    /**
     * 操作点击事件
     * @param {String} state order_pay:支付 order_edit:修改订单
     */
    actions_click(state) {
      if (state == "order_pay") {
        orderPayment({
          order_id: this.goods.id,
          pay_type: 0,
        }).then((res) => {
          if (res.code == 1) {
            this.$message.success(res.msg);
            this.$router.go(-1);
          }
        });
      } else if (state == "order_edit") {
        // 修改订单的弹框
        this.dialogVisible = {
          action: "order_edit",
          show: true,
          width: 666,
        };
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../styles/var.less";
// ::v-deep .el-form-item__label-wrap {
//   margin-left: 0px !important;
// }
::v-deep .cell {
  padding-left: 57px !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  color: #000000 !important;
}
::v-deep .el-form-item__label {
  line-height: 0;
  font-weight: 400;
  font-size: 16px;
  color: #333333;
}
::v-deep .el-form-item__content {
  line-height: 0;
  font-weight: 400;
  font-size: 16px;
  color: #333333;
}
::v-deep .el-form {
  margin-top: 23px;
}
.container {
  width: 100%;
  height: calc(100vh - @navHeight);
  background: #f9f9f9;

  .c-all {
    margin: 25px 110px 0px;
    background: #fff;
    justify-content: flex-start;
    align-items: center;

    .c1 {
      width: 100%;
      border: 1px solid #e3e3e3;
      box-sizing: border-box;
      .c1-left {
        box-sizing: border-box;
        width: 400px;
        height: 240px;
        padding: 30px;
        padding-left: 30px;
        justify-content: flex-start;
        align-items: flex-start;
        .c1-status {
          align-items: flex-end;

          .title {
            font-size: 30px;
            color: #000;
            font-weight: bold;
          }

          .time {
            margin-left: 17px;
            font-size: 16px;
            color: #000;
            font-weight: 400;

            .countdown {
              align-items: flex-end;
              font-size: 16px;
              color: #000;

              /deep/ .head {
                margin-bottom: 0px;
                font-size: inherit;
                color: inherit;
              }

              /deep/ .number {
                font-size: inherit;
                color: inherit;
              }
            }
          }
        }

        .c1-order-num {
          margin-top: 20px;
          font-size: 16px;
          color: #000;
          font-weight: 400;
          white-space: nowrap;
        }

        .c1-actions {
          margin-top: 26px;

          .c1-btn-1 {
            width: 100px;
            background: #ff5757;
            color: #fff;
            border-radius: 10px;
          }

          .c1-btn-2 {
            width: 100px;
            background: #222;
            color: #fff;
            border-radius: 10px;
          }

          .c1-btn-3 {
            color: #333;
          }
        }
      }

      .c1-right {
        width: 100%;
        border-left: inherit;
        padding: 20px;

        .c1-right-title {
          color: #999;
          font-size: 14px;
          font-weight: 400;
        }

        .step {
          width: auto;
          margin-top: 40px;

          .step-icon {
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            font-size: 20px;
            font-weight: bold;
            line-height: 30px;
            background: #999;
            color: #fff;
          }

          /deep/ .el-step__head.is-finish {
            color: #fff;
            border-color: #ff5757;

            .step-icon {
              background: #ff5757;
            }
          }

          /deep/ .el-step__title.is-finish {
            color: #000;
          }

          /deep/ .el-step__description.is-finish {
            color: #999;
          }
        }
      }
    }

    .c2 {
      width: 100%;
      margin-top: 20px;
      border: #e3e3e3 1px solid;
      padding: 20px 60px;
      box-sizing: border-box;

      .timeline {
        /deep/ .el-timeline-item {
          margin-left: 150px;
        }

        /deep/ .el-timeline-item__tail {
          border-color: #ff5757;
        }

        .year {
          color: #333;
          position: absolute;
          left: -150px;
          top: 0px;
          text-align: right;
        }

        .item {
          color: #ffffff;
          border-left: 2px solid #fff;
          margin-left: 25px;
          font-size: 15px;

          span {
            padding-left: 10px;
          }
        }
      }
    }

    .c3 {
      margin-top: 20px;
      width: 100%;
      justify-content: space-between;
      align-items: stretch;

      .card {
        box-sizing: border-box;
        width: 538px;
        height: 240px;
        border: inherit;
        padding: 19px 20px;
        border: 1px solid #e3e3e3;

        .title {
          color: #333;
          font-size: 20px;
          font-weight: 500;
        }

        .desc {
          margin-top: 23px;
        }

        .form-item {
          padding: 15px 0;
          margin-bottom: 0px;
        }
      }
    }

    .c4 {
      margin-top: 20px;
      width: 100%;
      border: 1px solid #e3e3e3;

      .goods {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: row;

        .cover {
          width: 60px;
          height: 60px;
          object-fit: contain;
        }

        .info {
          margin-left: 12px;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          flex-direction: column;

          .name {
            color: #000;
            font-size: 16px;
            font-weight: 400;
          }

          .desc {
            margin-top: 16px;
            color: #999;
            font-size: 14px;
            font-weight: 400px;
          }
        }
      }
    }
  }

  @bottomHeight: 70px;

  .bottom {
    height: @bottomHeight;
    position: fixed;
    width: 100%;
    left: 0;
    bottom: @bottomNavHeight;
    padding-right: 130px;
    background: #fff;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: row;
    gap: 20px;

    .bp {
      .b1 {
        font-size: 14px;
        color: #333;
        font-weight: 400;
        margin-bottom: 6px;
      }

      .b2 {
        font-size: 16px;
        color: #ff0000;
        font-weight: bold;
      }
    }

    .b-btn {
      background: #ff5757;
      color: #ffffff;
      font-size: 16px;
      border-radius: 10px;
    }

    .bg-red {
      background: #ff5757;
      color: #ffffff;
    }

    .bg-000 {
      background: #000000;
      color: #ffffff;
    }

    .bg-gray {
      background: #e3e3e3;
      color: #333;
    }

    .bg-999 {
      background: #999;
      color: #fff;
    }
  }

  .bottom-p {
    height: calc(@bottomHeight + @bottomNavHeight);
  }
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}
</style>
